<template>
  <div class="axiom-input-slider">
    <AxiomInputNumber
      :model-value="modelValue"
      @update:modelValue="emitValue"
      :min="min"
      :max="max"
      :step="step"
      class="axiom-input-slider__input"
    />
    <el-slider
      :model-value="modelValue"
      @update:modelValue="emitValue"
      :min="min"
      :max="max"
      :step="step"
      :show-tooltip="false"
      class="axiom-input-slider__slider"
    />
  </div>
</template>

<script setup>
import AxiomInputNumber from './AxiomInputNumber.vue';

defineOptions({
  name: 'AxiomInputSlider'
});

const props = defineProps({
  modelValue: { type: Number, default: 0 },
  min: { type: Number, default: 0 },
  max: { type: Number, default: 100 },
  step: { type: Number, default: 1 },
});

const emit = defineEmits(['update:modelValue']);

const emitValue = (value) => {
  if (typeof value !== 'number') {
    value = props.min ?? 0;
  }
  emit('update:modelValue', value);
};
</script> 